<template>
  <scroll :data="data" :loading="true" @loadMore="loadMore">
    <div class="discuss _m-2">
      <div
        class="d-flex discuss-list-ul border-bottom"
        v-for="item in data"
        :key="item.id"
      >
        <div class="avator">
          <img :src="item.usersVo.avator" alt="头像" v-if="item.usersVo.avator != null"/>
          <img src="~assets/img/head.png" alt="头像" v-else/>
        </div>
        <div class="info flex-1">
          <h2 class="d-flex justify-content-between align-items-center">
            <span>{{item.usersVo.nickName}}</span>
            <span>{{item.createTime|datetime}}</span>
          </h2>
          <p>{{item.discussContent}}</p>
          
          <div class="books d-flex justify-content-end">来源： <span>{{item.booksVo.booksName}}</span></div>
        </div>
      </div>
      
    </div>
  </scroll>
</template>

<script>
import Scroll from 'components/Scroll'
import { getDiscussList } from "api/DiscussApi";

export default {
  name: 'DiscussList',
  components: {
    Scroll
  },
  data () {
    return {
      search: {
        currentIndex: 1
      },
      totalPage: 1,
      data: []
    }
  },
  methods: {
    loadMore (currentIndex, $scroll) {
      this.search.currentIndex = currentIndex;
      if(this.search.currentIndex <= this.totalPage) {
       this.getData()
      } else  $scroll.forceUpdate();
    },
    getData () {
      getDiscussList(this.search)
        .then(res => {
          if(res.meta.success) {
            this.data = this.data.concat(res.data.datas)
            this.totalPage = this.data.pagination.totalPage
          }
        });
    }
  },
  created () {
    this.getData()
  }
}
</script>
<style lang="stylus" scoped>
.discuss {
  padding 10px
  background #FFF
}
.discuss-list-ul {
  padding 2vw 0
  .avator {
    margin-right: 10px;

    img {
      width: 25px;
      height: 25px;
      border-radius: 50%;
    }
  }

  .info {
    h2 {
      height: 25px;
      line-height: 20px;
      margin-bottom: 5px;
      font-size 16px
    }

    p {
      ellipsis2();
      font-size: 14px;
      line-height: 16px;
      margin-top 5px
      margin-left: 0px;
    }

    .books {
      margin-top 10px
      font-size 14px

      span {
        color $colorPrimaryDark
      }
    }
  }
}
</style>
